<template>
	<!-- 编辑弹出框 -->
	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%" top="5vh">
		<el-form ref="dataForm" :model="dataForm" label-width="80px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="ID">
						<el-input v-model="dataForm.id" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="分类">
						<el-select v-model="dataForm.playgame_id" placeholder="选择分类">
							<el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="商品编号">
						<el-input v-model="dataForm.playgame_id" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="用户名">
						<el-input v-model="dataForm.name" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="用户头像">
						<upload-single-image :value.sync="dataForm.avatar"></upload-single-image>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="时间">
						<el-input v-model="dataForm.date"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-form-item label="评价">
					<!-- 使用富文本组件 -->
					<editor :content.sync="dataForm.detail" style="height: 300px;"></editor>
				</el-form-item>
			</el-row>
		</el-form>
		<!-- 底部按钮 -->
		<span slot="footer" class="dialog-footer">
			<el-button size="medium" @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="handleSubmit">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import * as ReviewAPI from '@/api/review.js';
	import Editor from '@/components/Tinymce/index.vue'; //导入封装后的富文本组件
	import UploadSingleImage from '@/components/Upload/UploadSingleImage';
	import dayjs from 'dayjs';
	export default {
		name: 'reviewList',
		components: {
			editor: Editor, //注册富文本组件
			UploadSingleImage,
		},
		props: {
			category_id: {
				type: Number,
				default: 0
			},
			categoryList: Array //分类选项数据
		},
		data() {
			return {
				dialogVisible: false,
				dataForm: {
					id: 0
				},
				//数据校验规则，后续继续完善
				rules: {}
			};
		},
		computed: {
			//弹框标题
			dialogTitle() {
				return !this.dataForm.id ? '新增' : '编辑';
			}
		},

		methods: {
			init(id) {
				this.dataForm.id = id || 0;
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
					if (id) {
						//是编辑
						ReviewAPI.getDetailById(id).then(result => {
							this.dataForm = result.data; //看接口文档，知道data是对应的商品对象
							this.dataForm.date = dayjs(this.dataForm.date).format('YYYY-MM-DD');
							delete this.dataForm.picList; //删除多余字段；为什么？看API接口
							delete this.dataForm.family; //删除多余字段；为什么？看API接口
						});
					} else {
						//是新增
						this.setDataFormToDefault(); //Props传递的参数
					}
				});
			},

			// 确认提交
			handleSubmit() {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						ReviewAPI.updateReview(this.dataForm)
							.then(() => {
								this.$message.success(`保存成功`);
								this.dialogVisible = false;
								this.$emit('refreshDataList'); //重新刷新列表数据
							})
							.catch(error => {});
					}
				});
			},

			setDataFormToDefault() {
				//初始默认值
				let defaultForm = {};
				defaultForm.id = 0;
				defaultForm.playgame_id = this.category_id; //Props传递的参数
				defaultForm.detail = '';
				defaultForm.date = '';
				defaultForm.name = '';
				defaultForm.avatar = '';
				this.dataForm = Object.assign({}, defaultForm);
			}
		}
	};
</script>

<style scoped></style>
